<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 文档流 -->
    <!-- 
        none 将元素隐藏并且失去文档流的位置
     -->
    <span style="display: none;">span1</span>
    <span>span2</span>
    <div style="display: none;">div1</div>
    <div>div2</div>
    <hr>
    <!-- 
        block 将元素转化为块元素
     -->
    span1<span style="width: 50;height: 50px; border: 1px solid red; display: block;">span</span>span2
    div1<div style="width: 50;height: 50px; border: 1px solid red; display: block;">div</div>div2
    <hr>
    <!-- 
        inline 将元素转化为行元素
     -->
    span1<span style="width: 50;height: 50px; border: 1px solid red; display: inline;">span</span>span2
    div1<div style="width: 50;height: 50px; border: 1px solid red; display: inline;">div</div>div2
    <hr>
    <!-- 
        inline-block 将元素转换为行内块元素
        可以设置宽高，又可以和前后内容共处一行
     -->
    span1<span style="width: 50;height: 50px; border: 1px solid red; display: inline-block;">span</span>span2
    div1<div style="width: 50;height: 50px; border: 1px solid red; display: inline-block;">div</div>div2
</body>
</html>